<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>页面出错了 - 错误页</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
  
  <!-- 配置Tailwind自定义主题 -->
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#3b82f6',
            secondary: '#64748b',
            neutral: '#f1f5f9',
            success: '#10b981',
            warning: '#f59e0b',
            danger: '#ef4444',
          },
          fontFamily: {
            inter: ['Inter', 'system-ui', 'sans-serif'],
          },
        },
      }
    }
  </script>
  
  <style type="text/tailwindcss">
    @layer utilities {
      .text-shadow {
        text-shadow: 0 2px 4px rgba(0,0,0,0.1);
      }
      .animate-float {
        animation: float 6s ease-in-out infinite;
      }
      .animate-pulse-slow {
        animation: pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
      }
    }
    
    @keyframes float {
      0% { transform: translateY(0px); }
      50% { transform: translateY(-20px); }
      100% { transform: translateY(0px); }
    }
  </style>
</head>

<body class="font-inter bg-gradient-to-br from-blue-50 to-indigo-50 min-h-screen flex flex-col items-center justify-center p-4 text-gray-800">
  <!-- 装饰元素 -->
  <div class="absolute top-0 left-0 w-full h-full overflow-hidden pointer-events-none">
    <div id="decor-1" class="absolute -top-10 -left-10 w-40 h-40 bg-primary/5 rounded-full blur-3xl"></div>
    <div id="decor-2" class="absolute top-1/3 -right-20 w-60 h-60 bg-indigo-200/20 rounded-full blur-3xl"></div>
    <div id="decor-3" class="absolute bottom-0 left-1/4 w-80 h-80 bg-blue-100/20 rounded-full blur-3xl"></div>
  </div>

  <div class="relative z-10 max-w-2xl w-full text-center">
    <!-- 状态码显示 -->
    <div class="flex justify-center items-center gap-2 mb-8">
      <div id="error-code-left" class="text-[clamp(5rem,15vw,10rem)] font-bold text-primary/10 animate-float">4</div>
      <div id="error-icon" class="w-16 h-16 md:w-24 md:h-24 bg-primary/10 rounded-full flex items-center justify-center animate-pulse-slow">
        <i class="fa fa-compass text-primary text-2xl md:text-4xl"></i>
      </div>
      <div id="error-code-right" class="text-[clamp(5rem,15vw,10rem)] font-bold text-primary/10 animate-float" style="animation-delay: 1s">4</div>
    </div>

    <!-- 标题与描述 -->
    <h1 id="error-title" class="text-[clamp(1.8rem,5vw,3rem)] font-bold mb-4 text-gray-800">页面好像迷路了</h1>
    <p id="error-message" class="text-secondary text-lg md:text-xl mb-8 leading-relaxed">
      我们找不到您请求的页面，它可能已被移动、删除或从未存在过。<br>
      不妨试试其他链接或搜索内容？
    </p>

    <!-- 操作按钮 -->
    <div class="flex flex-col sm:flex-row gap-4 justify-center mb-12">
      <a href="/" class="px-8 py-3 bg-primary text-white rounded-full shadow-lg shadow-primary/20 hover:shadow-primary/30 hover:-translate-y-0.5 transition-all duration-300 font-medium">
        <i class="fa fa-home mr-2"></i>返回首页
      </a>
      <a href="/search" class="px-8 py-3 bg-white text-primary border border-primary/20 rounded-full shadow-sm hover:shadow-md hover:-translate-y-0.5 transition-all duration-300 font-medium">
        <i class="fa fa-search mr-2"></i>搜索内容
      </a>
    </div>

    <!-- 辅助导航 -->
    <div class="border-t border-gray-100 pt-6">
      <p class="text-gray-500 mb-4">或者访问这些常用页面</p>
      <div class="flex flex-wrap justify-center gap-4 text-sm text-primary">
        <a href="/about" class="hover:underline transition-colors">关于我们</a>
        <a href="/help" class="hover:underline transition-colors">帮助中心</a>
        <a href="/contact" class="hover:underline transition-colors">联系支持</a>
        <a href="/sitemap" class="hover:underline transition-colors">网站地图</a>
      </div>
    </div>
  </div>

  <!-- 页脚 -->
  <footer class="relative z-10 text-gray-500 text-sm mt-auto">
    <p id="error-code-display">Error Code: 404 | <a href="/report" class="hover:underline">报告此问题</a></p>
  </footer>

  <script>
    // 根据HTTP状态码动态更新错误页面内容
    function updateErrorPage(statusCode) {
      // 错误码映射配置
      const errorConfig = {
        400: {
          title: "错误的请求",
          message: "您的请求格式不正确，服务器无法理解。请检查您的输入并重试。",
          icon: "fa-exclamation-triangle",
          color: "warning",
          leftCode: "4",
          rightCode: "0"
        },
        401: {
          title: "未授权",
          message: "您需要登录才能访问此页面。请确认您的身份并重试。",
          icon: "fa-lock",
          color: "danger",
          leftCode: "4",
          rightCode: "1"
        },
        403: {
          title: "禁止访问",
          message: "您无权访问此页面。即使您登录，也没有足够的权限查看此内容。",
          icon: "fa-ban",
          color: "danger",
          leftCode: "4",
          rightCode: "3"
        },
        404: {
          title: "页面好像迷路了",
          message: "我们找不到您请求的页面，它可能已被移动、删除或从未存在过。<br>不妨试试其他链接或搜索内容？",
          icon: "fa-compass",
          color: "primary",
          leftCode: "4",
          rightCode: "4"
        },
        500: {
          title: "服务器内部错误",
          message: "服务器遇到了问题，无法完成您的请求。请稍后再试。",
          icon: "fa-server",
          color: "danger",
          leftCode: "5",
          rightCode: "0"
        },
        502: {
          title: "错误网关",
          message: "服务器作为网关或代理时，从上游服务器收到无效响应。请稍后再试。",
          icon: "fa-exchange",
          color: "warning",
          leftCode: "5",
          rightCode: "2"
        },
        503: {
          title: "服务不可用",
          message: "服务器暂时无法处理请求。这可能是由于服务器过载或维护所致。",
          icon: "fa-wrench",
          color: "warning",
          leftCode: "5",
          rightCode: "3"
        }
      };

      // 获取当前URL中的状态码参数（如果有）
      const urlParams = new URLSearchParams(window.location.search);
      const urlStatusCode = urlParams.get('status') || statusCode;
      
      // 确保状态码是数字且在配置中存在
      const code = parseInt(urlStatusCode, 10);
      const config = errorConfig[code] || errorConfig[404];
      
      // 更新页面内容
      document.getElementById('error-code-left').textContent = config.leftCode;
      document.getElementById('error-code-right').textContent = config.rightCode;
      document.getElementById('error-title').textContent = config.title;
      document.getElementById('error-message').innerHTML = config.message;
      document.getElementById('error-code-display').textContent = `Error Code: ${code} | `;
      
      // 更新图标和颜色
      const iconElement = document.querySelector('#error-icon i');
      iconElement.className = `fa ${config.icon} text-${config.color} text-2xl md:text-4xl`;
      
      // 更新装饰元素颜色
      document.getElementById('decor-1').className = `absolute -top-10 -left-10 w-40 h-40 bg-${config.color}/5 rounded-full blur-3xl`;
      document.getElementById('decor-2').className = `absolute top-1/3 -right-20 w-60 h-60 bg-${config.color}/10 rounded-full blur-3xl`;
      document.getElementById('decor-3').className = `absolute bottom-0 left-1/4 w-80 h-80 bg-${config.color}/5 rounded-full blur-3xl`;
    }

    // 尝试通过fetch API获取状态码（仅在同源情况下有效）
    async function detectStatusCode() {
      try {
        // 尝试获取当前页面，这可能会因跨域限制而失败
        const response = await fetch(window.location.href, { method: 'HEAD' });
        updateErrorPage(response.status);
      } catch (error) {
        // 默认使用404或从URL参数中获取
        updateErrorPage(404);
      }
    }

    // 初始化页面
    document.addEventListener('DOMContentLoaded', () => {
      detectStatusCode();
    });
  </script>
</body>
</html>